// 发送请求 获取统计数据
axios.get('/dashboard').then(({data:res}) => {
  // console.log(result)
  // 方法1
  // let {message, data: { groupData, overview, provinceData, salaryData, year }} = res
  // 方法2
  let { groupData, overview, provinceData, salaryData, year } = res.data
  // 设置最上边的数据
  // console.log(overview)
  for (let key in overview) {
    document.querySelector(`[name=${key}]`).innerHTML = overview[key]
  }
  
  // 调用创建图表的函数
  lineChart(year) // 折线图
  classSalaryChart(salaryData) // 饼图
  groupSalaryChart(groupData) // 柱状图
  sexSalaryChart(salaryData) // 饼图2 
  mapChart(provinceData) // 地图

})

// -------------------------------- 1. 折线图 -----------------------------
let lineChart = (data) => {
    let myChart = echarts.init(document.querySelector('#line'))
    let option = {
        title:{
            text: '2022全学科薪资走势', //  标题文本
            textStyle:{
                fontSize: '16'
            },
            top: '15',
            left: '10',
        },
        xAxis: {
            type: 'category',
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            data: data.map(item => item.month),
            axisLabel: {
                color: '#999'
            },
            axisLine :{
                lineStyle :{
                  color:'#ccc',
                  type:'dashed'
                }
            },
          },
        yAxis: {
            type: 'value',
            // splitLine > lineStyle > type
            splitLine:{
                lineStyle :{
                  type:'dashed'
                }
            },
          },
          // 鼠标移入提示
        tooltip: {
            trigger: 'axis' // 鼠标移入
          },
          // 网格
        grid:{
            top: '20%'
          },
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#499FEE' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#5D75F0' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
        series: [
            {
              // data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
              data: data.map(item => item.salary),
              type: 'line',
              smooth: true, //平滑曲线
              // 线条样式
              lineStyle: {
                width: 6
              },
              // 线条上标记的大小
              symbolSize: 10,
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#499FEE' // 0% 处的颜色
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(255,255,255,.2)' // 80% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(255,255,255,0)' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false。（如果是false，前面的0/0/0/1 就是一个表示，0表示最上面，1表示最下面；如果是true则0/0/0/1则表示具体的像素）
                }
              },
            }
          ]
    }
    myChart.setOption(option)
}

// -------------------------------- 2. 饼图 班级平均工资分布---------------------------
const classSalaryChart = (data) => {
    const myChart = echarts.init(document.querySelector('#salary'))
    const option = {
        title:{
            text: '班级薪资分布', //  标题文本
            textStyle:{
                fontSize: '16'
            },
            top: '15',
            left: '10',
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '6%',
          left: 'center'
        },
        series: [
          {
            name: '班级薪资分布',
            type: 'pie',
            radius: ['50%', '64%'],
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            // data: [
            //   { value: 1048, name: '1万以下' },
            //   { value: 735, name: '1.5万' },
            //   { value: 580, name: '1.2万' },
            //   { value: 300, name: '2万' }
            // ]
            data: data.map(item => {
              return {value: item.g_count + item.b_count, name: item.label}
            })
          }
        ],
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A']
    }
    myChart.setOption(option)
  }

// ---------------------------------- 3. 柱状图-----------------------------------------------
const groupSalaryChart = (data) => {
  // console.log(data)
  const myChart = echarts.init(document.querySelector('#lines'))
  const option = {
    xAxis: {
      type: 'category',
      // data: ['狗头', '死歌', '亚飞', '露露', '金克斯', 'ez', '亚索', '盲僧'],
      data: data[1].map(item => item.name),
      axisLine :{
                  lineStyle :{
                    color:'#ccc',
                    type:'dashed'
                  }
              },
      axisLabel: {
          color: '#999'
        },
    },
    yAxis: {
      type: 'value',
       splitLine:{
                  lineStyle :{
                    type:'dashed'
                  }
              }
    },
    tooltip: {},
    grid:{
      top: '30',
      left:'70',
      right:'30',
      bottom:'50'
    },
    color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#34D39A' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#499FEE' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      ],
    series: [
    {
      // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
      data: data[1].map(item => item.hope_salary),
      type: 'bar',
      name: '期望薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
    },
    {
      // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
      data: data[1].map(item => item.salary),
      type: 'bar',
      name: '就业薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
    }
  ]
  }
  myChart.setOption(option)

  // 找到8个按钮注册点击事件
  document.querySelector('#btns').addEventListener('click',function(e) {
    // e.preventDefault()
    if(e.target.tagName == 'BUTTON') {
      // 说明点击了那个按钮
      let i = e.target.innerHTML
      // console.log(i)
      // 排他思想
      document.querySelector('#btns .btn-blue').classList.remove('btn-blue')
      e.target.classList.add('btn-blue')
      // 更换图表中的信息
      option.xAxis.data = data[i].map(item => item.name)
      option.series[0].data = data[i].map(item => item.hope_salary)
      option.series[1].data = data[i].map(item => item.salary)
      // 修改完配置项后  重新创建图表
      myChart.setOption(option)
    }
  })
}

//------------------------------------- 4. 饼图2 --------------------------------------------
const sexSalaryChart = (data) => {
  const myChart = echarts.init(document.querySelector('#gender'))
  const option = {
    title:[
      {
      text: '男女薪资分布', //  标题文本
      textStyle:{
          fontSize: '16'
      },
      top: '10',
      left: '10'
      },
      {
        text: '男生',
        textStyle:{
          fontSize: '12'
        },
        top: '45%',
        left: '45%'
      },
      {
        text: '女生',
        textStyle:{
          fontSize: '12'
        },
        top: '85%',
        left: '45%'
      }
    ],
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '男薪资分布',
      type: 'pie',
      radius: ['20%', '30%'],
      center: ['50%','30%'],
      // data: [
      //   { value: 148, name: '1万以下' },
      //   { value: 435, name: '1.5万' },
      //   { value: 780, name: '1.2万' },
      //   { value: 200, name: '2万' }
      // ]
      data: data.map(item => {
        return {value: item.b_count, name: item.label}
      })
    },
    {
      name: '女薪资分布',
      type: 'pie',
      radius: ['20%', '30%'],
      center: ['50%','70%'],
      // data: [
      //   { value: 104, name: '1万以下' },
      //   { value: 735, name: '1.5万' },
      //   { value: 380, name: '1.2万' },
      //   { value: 500, name: '2万' }
      // ]
      data: data.map(item => {
        return {value: item.g_count, name: item.label}
      })
    }
  ],
  
  color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A']
  }
  myChart.setOption(option)
}

// ------------------------------------ 5. 地图 ---------------------------------------------
const mapChart = (data) => {
    // 因为用地图表示每个省有几名同学
    // 所以可以提前准备好数据
    const mapData = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 }
    ]

    // 使用服务器响应数据 替换原数据
    mapData.forEach(item => {
      let res = data.find(v => {
        // 服务器响应的数据是否包含原有的数据 res =  ture/false
        return v.name.includes(item.name)
      })
      if(res) {
        // 服务器响应给的数据包含原有的数据 则替换value值
        item.value = res.value
      }
    })


    const myChart = echarts.init(document.querySelector('#map'))
    const option = {
        title:{
            text: '籍贯分布', //  标题文本
            textStyle:{
                fontSize: '16'
            },
            top: '10',
            left: '10',
        },
        // 学员数据范围
        visualMap: {
          type: 'continuous', // 表示连续性
          min: 0,
          max: 10,
          inRange: { // 选中地区的颜色 
            color: ['#fff', '#0075F0']
          },
          text: [10,0], // 两端的文字
          left: 40,
          bottom: 20
        },
        // 鼠标移入的提示
        tooltip: {
          formatter: '{b}:{c}位学员', // {a}是series里面大的name；{b}表示每个区域的名字(省的名字)；{c}表示该地区的值
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          borderColor: 'transparent',
          textStyle: {
            color: '#fff'
          }
        },
        series:[{
            name: '籍贯分布',
            type: 'map', 
            map: 'china',
            label: {
              show: true,
              fontSize: 10, // 调整省的名字字体大小
              color: 'rgba(0,0,0,0.7)'
            },
            itemStyle: {
                areaColor: '#E0FFFF', // 每个省的颜色
                borderColor: 'rgba(0,0,0,0.7)' // 省界限的颜色
            },
            // 鼠标移入高亮状态下的效果
            emphasis: {
              itemStyle:{
                areaColor: '#34D39A',
                borderWidth: 0,
                shadowBlur: 20,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
              }
            },
            data: mapData
        }]
    }
    myChart.setOption(option)
  }
